<template>
    <show-modal :title="title" :loading="loading" width="500px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="产品图片" prop="username">
                <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                >
                    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                    <div v-else>
                        <a-icon class="upload-icon" :type="loading ? 'loading' : 'desktop'" />
                    </div>
                </a-upload>
            </a-form-model-item>
            <a-form-model-item label="产品名称" prop="pdtName">
                <a-input v-model.trim="form.pdtName" placeholder="请填写产品名称" />
            </a-form-model-item>
            <a-form-model-item label="产品编号" prop="pdtCode">
                <a-input v-model.trim="form.pdtCode" :disabled="disabled" placeholder="请填写产品编号" />
            </a-form-model-item>
            <a-form-model-item label="所属类别" prop="ctgCode">
                <a-tree-select
                    v-model="form.ctgCode"
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="typeList"
                    :replaceFields="{children:'childs', label:'ctgName', key:'id', value: 'ctgCode'}"
                    placeholder="请选择类别"
                >
                </a-tree-select>
            </a-form-model-item>
            <a-form-model-item label="半径(米)" v-if="form.ctgCode=='beacon'" prop="radius">
                <a-input-number
                    :min="1"
                    v-model.trim="form.radius"
                    placeholder="请填写信标半径"
                    style="width:100%;"
                />
            </a-form-model-item>
            <a-form-model-item label="所属协议" prop="protocol">
                <a-select v-model="form.protocol" placeholder="请填写所属协议">
                    <a-select-option value="mqtt">mqtt</a-select-option>
                </a-select>
            </a-form-model-item>
            <!-- <a-form-model-item label="标签" prop="tag">
                <a-input v-model.trim="form.tag" placeholder="请填写标签" />
            </a-form-model-item> -->
            <!-- <a-form-model-item label="是否发布" prop="published">
                <a-switch :default-checked="form.published ? true : false" @change="onSwitchStatusPublished" />
            </a-form-model-item> -->
            <a-form-model-item label="是否启用" prop="status">
                <a-switch :default-checked="form.status=='active' ? true : false" @change="onSwitchStatus" />
            </a-form-model-item>
            <!-- <a-form-model-item label="描述" prop="comment">
                <a-input v-model.trim="form.comment" placeholder="请填写产品描述" />
            </a-form-model-item> -->
        </a-form-model>
    </show-modal>
</template>

<script>
import { rules } from './rules';
import { addInfo,updateInfo } from '@/api/product/list';
export default {
    name: 'ShowInfo',
    props:{
        info:{
            type:Object,
            default:()=>{}
        },
        typeList:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            loading: false,
            rules,
            imageUrl: '',
            form: {
                icon: 'desktop',
                pdtName: '',
                pdtCode: '',
                ctgCode: undefined,
                ctgName: undefined,
                protocol: 'mqtt',
                radius: '',
                status: 'active'
            },
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            }
        };
    },
    computed:{
        title(){
            return this.info.id?'修改产品':'增加产品'
        },
        disabled() {
            return this.info?.id ? true : false;
        }
    },
    watch:{
        'form.ctgCode':function(val){
            let typeList = this.typeList;
            this.getNameByCode(typeList,val)
        }
    },
    created() {
        this.form = {...this.form,...this.info}
    },
    methods: {
        submit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true
                        if (this.info?.id) {
                            await updateInfo(this.form);
                            this.$message.success('修改成功!');
                        } else {
                            await addInfo(this.form);
                            this.$message.success('添加成功!');
                        }
                        this.$emit('submit');
                    } finally {
                        this.loading = false;
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //取消
        cancel() {
            this.$emit('cancel');
        },
        onSwitchStatusPublished(e){
            this.form.published = e ? 1 : 0;
        },
        //是否开启
        onSwitchStatus(e) {
            console.log(e)
            this.form.status = e ?'active' : 'inactive';
        },
        //根据code查询name
        getNameByCode(data,code){
            if(!data) return false;
            if(!Array.isArray(data)) return false;
            data.map(item=>{
                if(item.ctgCode==code){
                    this.form.ctgName = item.ctgName
                    console.log(item.ctgName)
                }else{
                    if(item.childs){
                        this.getNameByCode(item.childs,code);
                    }
                }
            })
        }
    }
};
</script>
<style lang="scss" scoped>
.upload-icon {
    font-size: 40px;
    color: $primary-color;
}
</style>
